<template>
  <!-- <div>运费模板添加&修改</div> -->
  <div>
    <el-dialog
      :title="title"
      :visible="showDialog"
      width="40%"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        label-width="100px"
        :model="form"
        :rules="rules"
      >
        <el-form-item
          label="模板类型"
          prop="templateType"
        >
          <el-select
            v-model="form.templateType"
            placeholder="请选择模板类型"
            style="width:450px"
            @change="changetemplateType"
          >
            <el-option
              v-for="item in templateTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="运送类型"
          prop="transportType"
        >
          <el-select
            v-model="form.transportType"
            placeholder="请选择运送类型"
            style="width:450px"
          >
            <el-option
              v-for="item in transportTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="templateTypeValue === 3"
          label="关联城市"
          prop="associatedCityList"
        >
          <el-checkbox-group v-model="form.associatedCityList">
            <el-checkbox label="2">京津冀</el-checkbox>
            <el-checkbox label="3">江浙沪</el-checkbox>
            <el-checkbox label="4">川渝</el-checkbox>
            <el-checkbox label="5">黑吉辽</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          v-else
          label="关联城市"
        >
          <span>全国</span>
        </el-form-item>
        <el-form-item
          label="首重价格"
          prop="firstWeight"
        >
          <el-input v-model="form.firstWeight">
            <span
              slot="suffix"
              style="margin-right:10px"
            >元</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="续重价格"
          prop="continuousWeight"
        >
          <el-input v-model="form.continuousWeight">
            <span
              slot="suffix"
              style="margin-right:10px"
            >元</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="轻抛系数"
          prop="lightThrowingCoefficient"
        >
          <el-input v-model="form.lightThrowingCoefficient"> </el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-row
          type="flex"
          justify="center"
        >
          <el-col :span="6">
            <el-button
              type="danger"
              size="mini"
              @click="btnOk"
            >确 定</el-button>
            <el-button
              size="mini"
              @click="closeDialog"
            >取 消</el-button>
          </el-col>
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { freightManageOperate } from '@/api/transit'
export default {
  props: {
    showDialog: {
      required: true,
      type: Boolean
    },
    // 传过来的id
    editId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      form: {
        // 模板类型
        templateType: null,
        // 运输类型
        transportType: null,
        // 关联城市
        associatedCityList: ['1'],
        // 首重价格
        firstWeight: null,
        // 续重价格
        continuousWeight: null,
        // 轻抛系数
        lightThrowingCoefficient: null
      },
      // 表单校验
      rules: {
        templateType: [
          { required: true, message: '模板类型不能为空', trigger: 'blur' }
        ],
        transportType: [
          { required: true, message: '运送类型不能为空', trigger: 'blur' }
        ],
        associatedCityList: [
          { required: true, message: '运送类型不能为空', trigger: 'blur' }
        ],
        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'blur' }
        ]
      },
      // 模板类型中的数据
      templateTypeOptions: [
        {
          value: 1,
          label: '同城寄'
        },
        {
          value: 2,
          label: '省内寄'
        },
        {
          value: 3,
          label: '经济区互寄'
        },
        {
          value: 4,
          label: '跨省'
        }
      ],
      // 运送类型的数据
      transportTypeOptions: [
        {
          value: 1,
          label: '普快'
        },
        {
          value: 2,
          label: '特快'
        }
      ],
      // 更改模板类型的value
      templateTypeValue: null
      // 复选框的数据
      // checkList: ['1']
    }
  },
  computed: {
    title() {
      return this.editId ? '编辑模板' : '新增模板'
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog', false)
      // 清空表单数据和表单校验
      this.$refs.form.resetFields()
      this.form = {
        // 模板类型
        templateType: null,
        // 运输类型
        transportType: null,
        // 关联城市
        associatedCityList: ['1'],
        // 首重价格
        firstWeight: null,
        // 续重价格
        continuousWeight: null,
        // 轻抛系数
        lightThrowingCoefficient: null
      }
    },
    // 改变模板类型
    changetemplateType(value) {
      // console.log(value)
      this.templateTypeValue = value
      if (value === 3) {
        this.form.associatedCityList = []
      } else {
        this.form.associatedCityList = ['1']
      }
    },
    // 点击确定按钮
    btnOk() {
      this.$refs.form.validate(async isOk => {
        if (isOk) {
          if (this.editId) {
            // 编辑
            await freightManageOperate({
              ...this.form,
              id: this.editId
            })
            // console.log(rs)
            // 提示
            this.$message.success('编辑成功')
          } else {
            // 添加
            await freightManageOperate({
              ...this.form,
              associatedCityList: this.form.associatedCityList
            })
            // 提示
            this.$message.success('添加成功')
          }
          // console.log('校验完成')

          // 关闭弹窗
          this.closeDialog()
        }
      })
    },
    // 获取详情
    async freightManageList(row) {
      const rs = await freightManageOperate(row)
      // console.log(row)
      // console.log('rs', rs)
      this.form = rs.data
      this.templateTypeValue = rs.data.templateType
      this.form.associatedCityList = rs.data.associatedCityList
    }
  }
}
</script>
